<template>
	<el-container class="page-user">
		<el-aside style="width: 240px;">
			<el-container>
				<el-main class="nopadding">
					<el-menu class="menu" :default-active="page">
						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
							<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
                                <el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
								<template #title>
									<span>{{item.title}}</span>
								</template>
							</el-menu-item>
						</el-menu-item-group>
					</el-menu>
				</el-main>
			</el-container>
		</el-aside>
		<el-main>
			<Suspense>
				<template #default>
					<component :is="page" :info="user"/>
				</template>
				<template #fallback>
					<el-skeleton :rows="3" />
				</template>
			</Suspense>
		</el-main>
	</el-container>
</template>

<script>
	import { defineAsyncComponent } from 'vue'

	export default {
		name: 'userCenter',
		components: {
			stock: defineAsyncComponent(() => import('./info/stock')),
			rate: defineAsyncComponent(() => import('./info/rate')),
			// product: defineAsyncComponent(() => import('./info/product')),
		},
		data() {
			return {
				menu: [
					{
						list: [
							{
								title: "库存参数",
								component: "stock",
								icon: "el-icon-postcard",
							},
							{
								title: "税率",
								component: "rate",
								icon: "el-icon-postcard",
							},
							// {
							// 	title: "生产参数",
							// 	component: "product"
							// },
						]
					},
				],
				user: {
					stock:'',
					name: "",
					role_name: "",
					avatar:"",
					sex:0,
					about:"",
					multipoint_login:0
				},
				page: "stock"
			}
		},
		//路由跳转进来 判断from是否有特殊标识做特殊处理
		beforeRouteEnter (to, from, next){
			next((vm)=>{
				if(from.is){
					//删除特殊标识，防止标签刷新重复执行
					delete from.is
					//执行特殊方法
					vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
						type: 'success',
						center: true
					}).then(() => {}).catch(() => {})
				}
			})
		},
		created() {
			this.getAdminInfo()
		},
		methods: {
			openPage(item){
				this.page = item.index
			},
			async getAdminInfo(){
				var res = await this.$API.admin.user.info.get();
				if(res.code == 1){
					this.user = res.data.user
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
		},
	}
</script>
